<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
	<title>自助开票</title>
	<link rel="stylesheet" href="__TEMP__/{$style}/public/wxdist/style/weui.css">
	<link rel="stylesheet" href="__TEMP__/{$style}/public/wxdist/example/example.css">
	<link rel="stylesheet" href="__TEMP__/{$style}/public/css/lCalendar.css">
	<style>
		* {
			font-size: 14px;
			color: #565656;
		}

		.title-div {
			height: 45px;
			line-height: 45px;
			text-align: center;
			background: #FFFFFF;
			border-bottom: 1px solid #dedede;
		}

		.title-div p {
			line-height: 45px;
			font-size: 18px;

		}

		.lt {
			float: left;
		}

		.ft {
			float: right;
		}

		.cl {
			clear: both;
		}

		.min-sh {
			font-size: 12px;
			color: #AAAAAA;
		}

		.weui-article p {
			font-size: 12px;
			color: #999999;
		}
	</style>
</head>
<body>
<!--<div class="title-div">
	<p>自助开票</p>
</div>-->
<div class="weui-cells__title weui-cell__lt lt">发票抬头</div>
<div class="weui-cells__title weui-cell__ft ft" style="color: #1AAD19;">
	<a href="{:__URL('APP_MAIN/invoice/invoicelist')}" style="color: #1AAD19;">
		<img src="__TEMP__/{$style}/public/images/jl.png" style="margin-top:-3px;vertical-align:middle;width: 22px">开票记录
	</a>
</div>
<div class="weui-cells cl">
	<div class="weui-cell weui-cell_select" id="select_invoice">
		<div class="weui-cell__bd" style="height: 70px;display: table;">
			<div class="sel-invoice" style="padding-left: 15px;display: table-cell;vertical-align: middle;"
				 id="sel_invoice_res">
				<p style="height: 26px;line-height: 26px;">
					<img src="__TEMP__/{$style}/public/images/add.png"
						 style="margin-top:-3px;vertical-align:middle;width: 22px">
					<span style="margin-left: 10px">选择微信发票抬头</span>
				</p>
				<!--<p class="min-sh"><br/>税号：1231312312312312</p>-->
			</div>
		</div>
	</div>
</div>
<div class="weui-cells__title weui-cell__lt">入住信息</div>
<div class="weui-cells weui-cells_form ">
	<div class="weui-cell weui-cell_select weui-cell_select-after">
		<div class="weui-cell__hd">
			<label for="" class="weui-label">入住酒店</label>
		</div>
		<div class="weui-cell__bd">
			<select class="weui-select" name="hotel" id="hotel">
				<option value="">选择酒店</option>
				<option value="o2088031379002395">杭州天择云峰酒店</option>
			</select>
		</div>
	</div>
	<div class="weui-cell">
		<div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
		<div class="weui-cell__bd">
			<input class="weui-input" type="text" placeholder="入住真实姓名" id="name">
		</div>
	</div>
	<div class="weui-cell">
		<div class="weui-cell__hd"><label class="weui-label">房间号</label></div>
		<div class="weui-cell__bd">
			<input class="weui-input" type="text" placeholder="本次入住房间号" id="roomNumber">
		</div>
	</div>
	<div class="weui-cell">
		<div class="weui-cell__hd"><label for="" class="weui-label">取票时间</label></div>
		<div class="weui-cell__bd">
			<input class="weui-input" id="qpsj" type="text" readonly="" name="input_date" placeholder="请选择取票时间"
				   data-lcalendar="2018-01-1,2030-12-31">
		</div>
	</div>
	<div class="weui-cell">
		<div class="weui-cell__hd"><label class="weui-label">备注</label></div>
		<div class="weui-cell__bd">
			<input class="weui-input" type="text" placeholder="手机号、特殊要求、额外消费" id="remark">
		</div>
	</div>
</div>
<div class="page__bd page__bd_spacing" style="margin-top: 20px">
	<a href="javascript:;" class="weui-btn weui-btn_primary" id="btn_invoice">确认开票</a>
</div>
<div class="article" style="margin-top: 20px">
	<div class="page__bd">
		<article class="weui-article">
			<section>
				<section>
					<h3 style="font-size: 13px;color: #999999;">温馨提示：</h3>
					<p>
						1.如需变更金额或抬头，建议您于预约时间之前与所在酒店电话沟通，或提交行的申请时在备注中详细说明。<br/>
						2.如需立即开票，请直接前往酒店前台操作。<br/>
						3.不同酒店开票流程可能不同，具体请与酒店前台确认。<br/>
					</p>
				</section>
			</section>
		</article>
	</div>
</div>
<input type="hidden" id="invoiceInfo" value='{ "type":"0", "title":"腾讯科技(深圳)有限公司", "taxNumber":"123466789987646131", "companyAddress":"深圳市南山区某某路腾讯大厦", "telephone":"123456789", "bankName":"某某银行", "bankAccount":"621111111111290" }'>
<input type="hidden" id="appId" value="{$signPackage['appId']}">
<input type="hidden" id="jsTimesTamp" value="{$signPackage['jsTimesTamp']}">
<input type="hidden" id="jsNonceStr" value="{$signPackage['jsNonceStr']}">
<input type="hidden" id="jsSignature" value="{$signPackage['jsSignature']}">
<div class="js_dialog" id="iosDialog2" style="display: none;">
	<div class="weui-mask"></div>
	<div class="weui-dialog">
		<div class="weui-dialog__bd">通知</div>
		<div class="weui-dialog__ft">
			<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
		</div>
	</div>
</div>


	<!--BEGIN toast-->
	<div id="toast" style="display: none;">
		<div class="weui-mask_transparent"></div>
		<div class="weui-toast">
			<i class="weui-icon-success-no-circle weui-icon_toast"></i>
			<p class="weui-toast__content" style="color: #FFFFFF;">操作完成</p>
		</div>
	</div>
	<!--end toast-->

	<!-- loading toast -->
	<div id="loadingToast" style="display: none;">
		<div class="weui-mask_transparent"></div>
		<div class="weui-toast">
			<i class="weui-loading weui-icon_toast"></i>
			<p class="weui-toast__content" style="color: #FFFFFF;">数据加载中</p>
		</div>
	</div>
<script src="__TEMP__/{$style}/public/wxdist/example/zepto.min.js"></script>
<!--<script src="__TEMP__/{$style}/public/js/jquery-2.1.0.min.js"></script>-->
<!--<script src="__TEMP__/{$style}/public/js/vconsole.min.js"></script>-->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
<script src="__TEMP__/{$style}/public/js/lCalendar.js"></script>
<script>


	window.onload = function () {
		// 初始化
		// var vConsole = new VConsole();
		wx.config({
			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId: $("#appId").val(), // 必填，公众号的唯一标识
			timestamp: $("#jsTimesTamp").val(), // 必填，生成签名的时间戳
			nonceStr: $("#jsNonceStr").val(), // 必填，生成签名的随机串
			signature: $("#jsSignature").val(),// 必填，签名，见附录1
			beta: true,
			jsApiList: ['chooseInvoiceTitle'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
		});
		wx.ready(function (res) {
			// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
			// alert('success');
			// console.log(res);
		});
		wx.error(function (res) {
			// alert('error');
			// console.log(res);
		});
		$("#select_invoice").click(function () {
			wx.invoke('chooseInvoiceTitle', {
				// 这里要传入参数
				"scene": "1"
			}, function (res) {
				// 这里处理调用结果
				if (res.err_msg == 'chooseInvoiceTitle:ok') {
					var type = res.choose_invoice_title_info;
					var titleInfo = JSON.parse(type);
					// console.log(titleInfo);
					var htmlStr = '';
					// 0单位，1个人
					var invoiceTitle = titleInfo.title;
					if (titleInfo.type == '0') {
						var Tariff = titleInfo.taxNumber;
						htmlStr = '<p>' + invoiceTitle + '</p><p class="min-sh">税号：' + Tariff + '</p>';
					} else {
						htmlStr += '<p>' + invoiceTitle + '</p>';
					}
					$("#invoiceInfo").val(type);

					$("#sel_invoice_res").html(htmlStr);
				} else if (res.err_msg == 'chooseInvoiceTitle:cancel') {
					weui.topTips('本次操作没有选择发票抬头', 3000);
				} else {
					// console.log(res);
					$('#iosDialog2>.weui-dialog>.weui-dialog__bd').text('获取微信发票抬头出错了，请稍后重试或至酒店前台办理发票');
					$('#iosDialog2').fadeIn(200);
					// alert(1);
				}
			});
		});


		$('#iosDialog2').on('click', '.weui-dialog__btn', function () {
			$(this).parents('.js_dialog').fadeOut(200);
		});

		function GetDateStr(AddDayCount) {
			var dd = new Date();
			dd.setDate(dd.getDate() + AddDayCount);//获取AddDayCount天后的日期
			var y = dd.getFullYear();
			var m = dd.getMonth() + 1;//获取当前月份的日期
			var d = dd.getDate();
			return y + "-" + m + "-" + d;
		}

		// document.write("前天："+GetDateStr(-2));
		// document.write("<br />昨天："+GetDateStr(-1));
		// document.write("<br />今天："+GetDateStr(0));
		// document.write("<br />明天："+GetDateStr(1));
		// document.write("<br />后天："+GetDateStr(2));
		// document.write("<br />大后天："+GetDateStr(3));
		var dd = new Date();
		var calendardatetime = new lCalendar();
		calendardatetime.init({
			'trigger': '#qpsj',
			'type': 'datetime',
			'minDate': GetDateStr(-2),//最小日期 注意：该值会覆盖标签内定义的日期范围
			'maxDate': GetDateStr(2)//最大日期 注意：该值会覆盖标签内定义的日期范围
		});

		$("#btn_invoice").click(function () {
			var invoiceInfo = $("#invoiceInfo").val();
			var hotel = $("#hotel").val();
			var name = $("#name").val();
			var roomNumber = $("#roomNumber").val();
			var qpsj = $("#qpsj").val();
			var remark = $("#remark").val();

			if(invoiceInfo == ''){
				weui.topTips('请选择发票抬头', 3000);
				return false;
			}

			if(hotel == ''){
				weui.topTips('请选择入住酒店', 3000);
				return false;
			}

			if(name == ''){
				weui.topTips('请填写入住人真实名称', 3000);
				return false;
			}

			if(roomNumber == ''){
				weui.topTips('请填写入住房间号', 3000);
				return false;
			}

			if(qpsj == ''){
				weui.topTips('请选择取票时间', 3000);
				return false;
			}


			$.ajax({
				type: 'POST',
				url: "{:__URL('APP_MAIN/invoice/invoicehandle')}",
				data: {
					invoiceInfo: invoiceInfo,
					hotel: hotel,
					name: name,
					roomNumber: roomNumber,
					qpsj: qpsj,
					remark: remark,
				},
				dataType: 'json',
				beforeSend: function (xhr, settings) {
					$("#loadingToast").css('display','block');
				},
				success: function (data) {
					// console.log(data);
					if(data.code == 1){
						$("#toast").css('display','block');
						var strHtml = '<p style="height: 26px;line-height: 26px;"><img src="__TEMP__/{$style}/public/images/add.png" style="margin-top:-3px;vertical-align:middle;width: 22px"><span style="margin-left: 10px">选择微信发票抬头</span></p>';
						$("#sel_invoice_res").html(strHtml);
						$("#invoiceInfo").val('');
						$("#hotel").val('');
						$("#name").val('');
						$("#roomNumber").val('');
						$("#qpsj").val('');
						$("#remark").val('');
						setTimeout(function () {
							$("#toast").css('display','none');
						}, 2000);
					}else{
						weui.topTips('操作失败，请稍后重试或至酒店前台办理发票', 3000);
					}
				},
				error: function (xhr, type) {
					// alert('Ajax error!');
				},
				complete: function (xhr, status) {
					$("#loadingToast").css('display','none');
				}
			})
		})
	}
</script>
</body>
</html>